<template>
    <div id="kline_1" style="width: 100%; height: 100%; padding-top: 15px;"></div>
</template>

<script>
import * as echarts from 'echarts';
import { saleData } from '@/api/msg';
export default {
    data(){
        return {
            option: {
                colorBy: "series",
                color: ["#5B8FF9", "#69DBAE", "#5070dd", "#b6d634", "#505372", "#ff994d", "#0ca8df", "#ffd10a", "#fb628b", "#785db0", "#3fbe95" ],
                legend: {
                    data: ['销售额', '销售利润']
                },
                grid: {
                    left: 50,
                    bottom: 50,
                    right: 50,
                },
                xAxis: [
                    {
                        type: 'category',
                        boundaryGap: true,
                        data: []
                    }
                ],
                yAxis: [
                    {
                        type: 'value'
                    }
                ],
             
                series: [
                    {
                        name: '销售额',
                        type: 'line',
                        stack: '总量',
                        areaStyle: { normal: { color: '#5B8FF9'} },
                        data: [],
                        smooth: true
                    },
                    {
                        name: '销售利润',
                        type: 'line',
                        stack: '总量',
                        areaStyle: { normal: { color: '#69DBAE' } },
                        data: [],
                        smooth: true
                    }
                ]
            },
            
        }
    },
    methods: {
        initCharts(){
            saleData({}).then(res=>{
                let data = res.dateList.slice(0,7).map(function(element) {
                    return element.slice(5,10);
                });
                this.option.xAxis = [{
                    type: 'category',
                    boundaryGap: true,
                    data: data
                }]
                this.option.series = [
                    {
                        name: '销售额',
                        type: 'line',
                        stack: '总量',
                        areaStyle: { normal: { color: '#5B8FF9'} },
                        data: res.salesVolumeList.slice(0,7),
                        smooth: true
                    },
                    {
                        name: '销售利润',
                        type: 'line',
                        stack: '总量',
                        areaStyle: { normal: { color: '#69DBAE' } },
                        data: res.salesProfitList.slice(0,7),
                        smooth: true
                    },
                ]
                var chartDom = document.getElementById('kline_1');
                var myChart = echarts.init(chartDom);
                myChart.setOption(this.option)
            })    
        }
    }

}
</script>

<style lang="scss">
   
</style>